<template>
	<div class="main">
		<div class="container">
			<!-- content here -->
			<div class="module">
				<h3>购物车清单</h3>
				<table class="table">
					<thead>
						<tr>
							<th></th>
							<th>商品信息</th>
							<th>单价</th>
							<th>数量</th>
							<th>小计</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(pro,index) in product" :key="pro.pid">
							<td><input type="checkbox" v-model="pro.checked" @click="allorno(pro.checked)"></td>
							<td>
								<img class="cart-goods-img" :src="product.cover">
								<span>{{pro.title}}</span>
							</td>
							<td>￥{{pro.price}}</td>
							<td>
								<div class="number-bar">
									<el-input-number v-model="pro.quantity" @change="mony(index)" :min="1" :max="pro.stock" label="描述文字"></el-input-number>
								</div>
							</td>
							<td>￥{{pro.price * pro.quantity}}</td>
							<td>
								<span class="number-control" @click="del(index)">×</span>
							</td>
						</tr>
					</tbody>
				</table>
				<div class="module-bottom">
					<div style="flex-grow: 10;">
						<label>
							<input type="checkbox" v-model="all" @click="allcheck()">
							<span>全选</span>
						</label>
						<a href="#">删除选中的商品</a>
					</div>
					<div class="autofill">
						<div>
							已选择
							<span class="color1 big">{{totalCheked}}</span>
							件商品
						</div>
						<div class="color2">
							共
							<span class="big">{{product.length}}</span>
							件商品
						</div>
					</div>
					<div class="autofill">
						<div>应付总额：<span class="color1 big">￥{{totalMoney}}</span></div>
						<div class="color2">应付总额不含运费</div>
					</div>
					<div class="autofill">
						<button class="btn-blue" :disabled="ok" @click="over">现在结算</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				product: [],
				ok: false,
				all: true
			}
		},
		created() {
			var user = JSON.parse(sessionStorage.getItem('newuser'))
			this.axios.get('/product/findall', {
				params: {
					uid: user.uid
				}
			}).then(response => {
				let a = response.data.data
				a.forEach(p => p.checked = true)
				this.product = a
			})
		},
		methods: {

			allcheck() {
				if (!this.all) {
					this.product.forEach(p => p.checked = true)
				} else {
					this.product.forEach(p => p.checked = false)
				}
			},
			allorno(x) {
				if (!x) {
					if (this.product.forEach(p => p.checked)) {
						this.all = true
					}
					return
				} else {
					this.all = false
				}
			},
			mony(index) {
				let user = JSON.parse(sessionStorage.getItem('newuser'))
				let cart = this.product[index]
				this.axios.get('/product/updata', {
					params: {
						uid: user.uid,
						pid: cart.pid,
						quantity: cart.quantity
					}
				})
			},
			del(index) {
				var user = JSON.parse(sessionStorage.getItem('newuser'))
				let cart = this.product[index]
				this.axios.get('/product/del', {
					params: {
						uid: user.uid,
						pid: cart.pid,
						quantity: cart.quantity
					}
				}).then(response => {
					let res = response.data
					if (res.code == 0) {
						this.product.splice(index, 1);
					}
				})
			},
			over() {
				let user = JSON.parse(sessionStorage.getItem('newuser'))
				let carts = this.product.filter(p => p.checked).map(p => {
					return {
						pid: p.pid,
						uid: user.uid,
						quantity: p.quantity
					}
				})
				this.axios.post('/order', carts).then(response => {
					let res = response.data
					if (res.code == 0) {
						this.$message('下单成功')
						this.$router.push({
							name: "Order",
							params: {
								order: res.data
							}
						})
					} else {
						this.$message(res.msg)
					}
				})
			}
		},
		computed: {
			totalMoney() {
				return this.product.filter(p => p.checked).reduce((a, b) => {
					return a + b.price * b.quantity
				}, 0)
			},
			totalCheked() {
				return this.product.filter(pro => pro.checked).length;
			}
		}
	}
</script>

<style scoped="scoped">
	.table {
		width: 100%;
		background-color: #FFFFFF;
		/* 合并相邻单元格的边框,由于这个是表格的整体行为,所以写在表格样式中,不要写在td/th样式中 */
		border-collapse: collapse;
	}

	.table .cart-goods-img {
		width: 80px;
		height: 80px;
		vertical-align: middle;
	}

	.table th,
	.table td {
		text-align: left;
		padding: 15px;
	}

	.table th {
		border-bottom: 1px solid #CCCCCC;
	}

	.module-bottom {
		display: flex;
		align-items: center;
		background-color: #FBFBFB;
		padding: 15px;
		border-top: 1px solid #CCCCCC;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	.module-bottom .autofill {
		flex-grow: 1;
		text-align: right;
	}
</style>
